<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>Catalog</title>
    <link rel="stylesheet" th:href="@{/static/css/dining.css}" type="text/css" media="screen" />
    <script th:src="@{/js/jquery-3.7.1.js}"></script>
</head>

<body>

<!-- 引入 top.html -->
<header th:replace="common/top"></header>

<div id="BackLink">
    <a th:href="@{/catalog/index}">Return to Main Menu</a>
</div>

<div id="Catalog">
    <h2 th:if="${category != null}" th:text="${category.categoryName}"></h2>
    <table>
        <tr>
            <th>Product ID</th>
            <th>Name</th>
        </tr>
        <tr th:each="product : ${category.productList}"
            th:onclick="|window.location.href='@{/catalog/viewProduct(categoryId=${category.categoryId},productId=${product.productId})}'|">
            <td th:text="${product.productId}"></td>
            <td th:text="${product.name}"></td>
        </tr>
    </table>
</div>

<!-- 引入 bottom.html -->
<footer th:replace="common/bottom"></footer>

</body>
</html>